<template>
	<view class="u-p-28 bg-white">
		<u-form :model="form" :label-style="labelStyle" :border-bottom="false" label-position="top" ref="uForm">

			<u-form-item :border-bottom="false" label="分类">
				<radio-button v-model="form.category_id" :list="communityList"></radio-button>
			</u-form-item>

			<u-form-item :border-bottom="false" label="标题">
				<view class="u-rela">
					<text class="category-text">{{category_text}} | </text>
					<u-input :clearable="false" :custom-style="form.category_id ===1? inputTitleMoreStyle:inputTitleStyle"
						v-model="form.title" placeholder="请输入标题" />
				</view>
			</u-form-item>

			<u-form-item :border-bottom="false" label="正文">
				<u-input :clearable="false" :custom-style="textareaStyle" height="340" type="textarea"
					v-model="form.content" placeholder="请输入具体内容，地点，时间和联系方式" />
			</u-form-item>

			<u-form-item :border-bottom="false" label="图片">
				<upload filetype="file" placeholder="选择图片/视频" v-model="form.images" :max="9"></upload>
			</u-form-item>

			<view class="submit">
				<view class="btn" @click="submit">发布</view>
			</view>

		</u-form>


	</view>
</template>

<script>
	import {
		communityList
	} from '@/const';
	import {
		upload
	} from '@/pagesCommunity/components/upload/upload.vue';
	import {
		radioButton
	} from '@/components/radioButton/radioButton.vue';
	import {
		getCommunityInfo,
		communityPublish
	} from '@/api/community';
	export default {
		components: {
			upload,
			radioButton
		},
		computed: {
			category_text() {
				if (this.form.category_id) {
					return this.communityList.filter(item => item.id == this.form.category_id)[0].name;
				} else {
					return '晒照';
				}
			}
		},
		data() {
			return {
				id: '',
				form: {
					category_id: '',
					images: []
				},
				communityList,
				labelStyle: {
					borderLeft: '3px solid  #FFCF0B',
					paddingLeft: '5px',
					color: '#333',
					fontSize: '16px',
					height: '16px',
					marginBottom: '10rpx'
				},
				inputStyle: {
					height: '40px',
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '0 10px',
				},
				inputTitleMoreStyle: {
					height: '40px',
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '0 10px 0 90px',
				},
				inputTitleStyle: {
					height: '40px',
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '0 10px 0 54px',
				},
				textareaStyle: {
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '10px',
				},
			};
		},
		onLoad(options) {
			// 我的-帖子-编辑会来这里修改帖子内容
			this.id = options.id;
		},
		mounted() {
			if (this.id) {
				this.getInfo();
			}
			this.form.category_id = this.communityList[0].id;
		},
		methods: {
			async getInfo() {
				const res = await getCommunityInfo({
					id: this.id
				});
				const data = res.data;
				data.images = data.attachments.map(item => {
					item.url = item.attachment;
					return item;
				})
				this.form = data;

			},
			async submit() {
				await communityPublish(this.form);
				uni.showModal({
					showCancel: false,
					content: '您的帖子信息已发布成功',
					confirmColor: '#333',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		padding: 32rpx;

		.btn {
			height: 44px;
			line-height: 44px;
			color: #333333;
			font-size: 16px;
			background: #FFCF0B;
			border-radius: 22px;
			text-align: center;
		}
	}

	.category-text {
		position: absolute;
		z-index: 5;
		left: 20rpx;
		top: 1px;
	}
</style>
